<template>
	<view class="layout-container">
		<DefaultHeader></DefaultHeader>
		<view class="layout-content">
			<slot></slot>
		</view>
		<view class="layout-footer" style="background-color: red;">
			底部区域
		</view>
	</view>
</template>
	
<script>
import DefaultHeader from '@/components/DefaultHeader.vue';

export default {
	components: {
		DefaultHeader
	}
}
</script>

<style scoped>
.layout-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.layout-content {
	flex: 1;
	padding: 20rpx;
	background-color: #f5f5f5;
}
</style>